<div id="top-left">
  <span class="location-title">账户</span>
</div>
<div class="main-content">
  <ul nz-menu nzMode="horizontal" class="location-menu">
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/account/offline-pay']">
      转账汇款
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/account/offline-pay-log']">
      转账记录
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/account/online-pay']">
      在线充值
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/account/online-pay-log']">
      直充记录
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/account/recharge']">
      充值记录
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/account/pay-log']">
      消费明细
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/account/time-detail']">
      时长明细
    </li>
  </ul>
  <div class="account-info">
    <table>
      <colgroup>
        <col width="220">
        <col>
      </colgroup>
      <tbody>
        <tr>
          <td rowspan="5"><img style="width: 210px;" src="/assets/images/bank.png" /></td>
          <td class="account-info-title">转账对公账号</td>
        </tr>
        <tr>
          <td>开户名： 贵州云视界科技有限公司</td>
        </tr>
        <tr>
          <td>开户银行： 中国工商银行股份有限公司贵阳花果园金融街支行</td>
        </tr>
        <tr>
          <td>银行账号： 2402 1009 0910 0055 580</td>
        </tr>
        <tr>
          <td>公司地址： 贵州省贵阳市南明区花果园国际中心二号楼1513-1514</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="form-container">
    <div style="padding-bottom: 15px; padding-left: 20px; color: #b20000; font-weight: bold;">
      当您转账至贵州云视界科技有限公司，请填写以下信息并提交，财务审核后会尽快为您充值。
    </div>
    <form style="max-width: 550px;" nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="amount">转账金额</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="请输入转账金额!">
          <nz-input-group nzSuffix="元" nzPrefix="￥" class="input-item">
            <input type="text" nz-input formControlName="amount" placeholder="转账金额" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="payAccountName">账户名称</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="请输入账户名称!">
          <nz-input-group nzPrefixIcon="bank" class="input-item">
            <input type="text" nz-input formControlName="payAccountName" placeholder="账户名称" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="payAccountNo">付款账号</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="请输入转账号码">
          <nz-input-group nzPrefixIcon="number" class="input-item">
            <input type="text" nz-input formControlName="payAccountNo" placeholder="银行卡号" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24">转账截图</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24">
          <nz-upload class="avatar-uploader" [nzAction]="uploadUrl" [nzHeaders]="headers" nzName="capture"
            nzListType="picture-card" [nzShowUploadList]="false" [nzBeforeUpload]="beforeUpload"
            (nzChange)="handleChange($event)">
            <ng-container *ngIf="!payImageUrl">
              <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>
              <div class="ant-upload-text">转账截图</div>
            </ng-container>
            <img *ngIf="payImageUrl" [src]="payImageUrl" style="width: 100%" />
          </nz-upload>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <span nzSpan="4"></span>
        <nz-form-control [nzSpan]="18" [nzOffset]="4">
          <button nz-button [nzType]="'primary'">提交转账信息</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</div>
